<template>
  <view class="" :style="[scroll_style]">
			<view :style="[scroll_box]">
				<view class="" :style="[scroll_item, itemStyle]" v-for="(item,index) in scroll_list" :key="index">
					<template v-if="$slots.default">
						<slot :rows='item'></slot>
					</template>
					<template v-else>
						<view class="scroll_cell">
							<view class="title">{{item[name]}}</view>
							<view class="time">{{item[time_name]}}</view>
						</view>
					</template>
				</view>
			</view>
		</view>
</template>

<script>
	/*
	 * @param {list,Array} 滚动数据
	 * @param {time,Number} 滚动间隔时间
	 * @param {min,Number} 最少几条开始滚动
	 * @param {height,Number} 滚动区域的高度(单位rpx)
	 * @param {line_height,Number} 每次滚动的高度(单位rpx)
	 * @param {name,String} 左边属性名
	 * @param {time_name,String} 右边属性名
	 */
	export default {
		name: "scrollList",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			time: {
				typeof: Number,
				default: () => 5000
			},
			min: {
				typeof: Number,
				default: () => 3,
			},
			height: {
				typeof: Number,
				default: () => 520,
			},
			line_height: {
				typeof: Number,
				default: () => 60,
			},
			name: {
				typeof: String,
				default: () => 'name',
			},
			time_name: {
				typeof: String,
				default: () => 'time',
			},
      itemStyle: {
        type: Object,
        default: () => {}
      }
		},
		data() {
			return {
				scroll_list: [],
				timer: null, //定时器
				scroll_box: {}, //滚动动画样式
        scrollX: 0
			}
		},
		mounted() {

		},
		methods: {
			scroll() {
				if (this.scroll_list.length < this.min) { //低于3条不滚动
					return
				}
				clearInterval(this.timer);
				this.timer = setInterval(() => {
          if (this.scrollX == this.scroll_list.length * this.line_height- this.height){
            this.scrollX = 0
            	this.scroll_box = {
            		'margin-top': 0,
            		'transition': ''
            	}
          } else {
            this.scrollX += this.line_height
            this.scroll_box = {
              'margin-top': `-${this.scrollX}rpx`,
              'transition': 'all 0.5s'
            }
          }
				}, this.time)
			},
		},
		computed: {
			scroll_style() {
				return {
					'overflow': 'hidden',
					'max-height': `${this.height}rpx`,
				}
			},
			scroll_item() {
				return {
					'overflow': 'hidden',
					'height': `${this.line_height}rpx`,
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		watch: {
			list: {
				handler(news, old) {
					this.scroll_list = news
					this.scroll()
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>

<style lang="scss" scoped>
	.scroll_cell {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			flex: 1;
			color: #333;
			font-size: 24upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
		}

		.time {
			margin-left: 24upx;
			color: #999;
			font-size: 24upx;
		}
	}
</style>
